<template>
    <div>
        <el-select popper-class="selects" v-loadmore="loadmore" :teleported='false' v-model="selectValue"
            placeholder="搜索" style="width: 240px" filterable :filter-method="handleSearchQuery"
            @change="handleSearchChange" no-data-text="暂无数据">
            <el-option v-for="item in datas" :key="item.id" :label="item.name" :value="item.id" />
            <p v-if="loadingmore">加载中</p>
            <p v-if="loadingnomore">无数据</p>
        </el-select>
        <div id="mapContainer" ref="mapContainer"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';




// 高德地图密钥
window._AMapSecurityConfig = {
    securityJsCode: "672f0f3f9a66a6075ebfd11687066e63",
}
// 加载
const loadingmore = ref(false)
// 无数据
const loadingnomore = ref(false)


// 地图
const mapContainer = ref(null);
let mapInstance = null; // 用于存储地图实例
// 搜索地址
const address = ref("");
const currentPageIndex = ref(1); // 初始化为第一页
// 搜索下拉框数据
const datas = ref([]);
// 搜索框选定值
const selectValue = ref(null)
// 搜索防抖
let debounceTimer = ref(null)


// 自定义标记点
const points = [
    { position: [117.371662, 34.106817], title: '标记1' },
    { position: [117.671662, 34.406817], title: '标记2' },
    { position: [117.071662, 34.006817], title: '标记3' },
    { position: [124.032222, 40.291666], title: '标记4' },
    { position: [124.987500, 40.15444444], title: '标记5' },


];

function handleSearchQuery(value) {
    // 先清空之前数据
    datas.value = []

    clearTimeout(debounceTimer.value)
    debounceTimer.value = setTimeout(() => {
        // 在这里可以处理输入框的搜索值，比如将它传递给后台进行搜索或其他逻辑处理
        address.value = value;
    }, 500); // 设置延迟时间，单位为毫秒，这里设置为 300ms
}
// 选择搜索值
const handleSearchChange = (id) => {
    const { lat, lng } = datas.value?.find(e => e.id == id)?.location || { lat: 34.206817, lng: 117.171662 }
    console.log(lat, lng)
    mapInstance.setCenter([lng, lat]);
    mapInstance.setZoom(15);
}


// 触底加载下一页数据 自定义指令触发的事件
const loadmore = async () => {
    // 开启加载
    loadingmore.value = true
    await jiazai()
}
// 加载数据 防抖
let time = ref(null)
const jiazai = () => {
    if (time) {
        clearTimeout(time)
    }
    return new Promise((resolve, reject) => {
        time = setTimeout(() => {
            currentPageIndex.value++
            resolve();
        }, 500);
    })
}

// 开始创建地图
const initMap = () => {
    AMapLoader.load({
        key: '6cfe98a22b495d25bf404ededd9cd59d', // 替换为你的高德地图 API 密钥
        version: '2.0',
        plugins: [] // 确保加载了PlaceSearch插件
    })
        .then((AMap) => {
            mapInstance = new AMap.Map(mapContainer.value, {
                viewMode: '2D', // 使用2D视图
                zoom: 5.8, // 初始化缩放级别
                center: [117.171662, 34.206817], // 初始化地图中心点
                mapStyle: "amap://styles/normal", // 设置地图的显示样式
            });

            // 异步加载控件
            AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.PlaceSearch"], function () {
                const toolbar = new AMap.ToolBar(); // 创建工具条插件实例
                mapInstance.addControl(toolbar); // 添加工具条插件到地图

                const scale = new AMap.Scale(); // 创建比例尺插件实例
                mapInstance.addControl(scale); // 添加比例尺插件到地图

                const HawkEye = new AMap.HawkEye(
                    {
                        width: '100px',
                        height: '120px',
                        draggable: true,
                        showButton: true
                    }
                ); // 创建比例尺插件实例
                mapInstance.addControl(HawkEye); // 添加比例尺插件到地图

                // 搜索配置
                const MSearch = new AMap.PlaceSearch({ //设置PlaceSearch属性
                    type: "", //数据类别
                    pageSize: 10, //每页结果数,默认10 
                    pageIndex: currentPageIndex.value, //请求页码，默认1
                    extensions: "base" //返回信息详略，默认为base（基本信息）
                });
                //返回结果
                // 监听输入框的值与当前页码的值
                watch([address, currentPageIndex], ([newv, newcurrent], [oldnewv, oldcurrent]) => {
                    //    修改页码
                    MSearch.setPageIndex(newcurrent);
                    MSearch.search(newv, (a, b) => {
                        if (b?.poiList?.pois.length == 0) {
                            // 没有数据了
                            loadingmore.value = false
                            loadingnomore.value = true
                        } else {
                            loadingnomore.value = false
                        }
                        b?.poiList?.pois.forEach(e => {
                            datas.value.push(e);
                        })
                        // 关闭加载中
                        loadingmore.value = false
                    });
                })
            });


            // 添加点击事件监听器
            mapInstance.on('click', (event) => {
                const { lng, lat } = event.lnglat;
                console.log(`点击位置的坐标: 经度: ${lng}, 纬度: ${lat}`);
            });

            // 多边形范围
            const pathArr = [
                [
                    [ // 第一个多边形的外环
                        [117.171662, 34.206817],
                        [117.182388, 34.205432],
                        [117.182352, 34.201567],
                        [117.186643, 34.200833],
                        [117.185701, 34.193718],
                        [117.179784, 34.1948],
                        [117.178857, 34.191873],
                        [117.17561, 34.192418],
                        [117.171429, 34.191105],
                        [117.167786, 34.191073],
                        [117.168486, 34.192073],
                        [117.171662, 34.206817] // 闭合外环
                    ],
                    [ // 第一个多边形的内环（孔）
                        [117.177, 34.199], // 内环点1
                        [117.181, 34.198], // 内环点2
                        [117.180, 34.196], // 内环点3
                        [117.177, 34.196], // 内环点4
                    ]
                ],
                // 可以继续添加其他多边形及其孔，如果需要的话
            ];

            const polygon = new AMap.Polygon({
                path: pathArr, //多边形路径
                fillColor: "#ccebc5", //多边形填充颜色
                strokeOpacity: 1, //线条透明度
                fillOpacity: 0.5, //填充透明度
                strokeColor: "#2b8cbe", //线条颜色
                strokeWeight: 1, //线条宽度
                strokeStyle: "dashed", //线样式
                strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
            });
            mapInstance.add(polygon)
            // 点
            // 批量添加点标记
            points.forEach(point => {
                let marker = new AMap.Marker({
                    position: point.position,
                    title: point.title,
                    map: mapInstance
                });

                let text = new AMap.Text({
                    text: point.title,
                    position: marker.getPosition(),  // 设置文本标签的位置与点标记相同
                    offset: new AMap.Pixel(-25, -60)  // 设置文本标签的偏移量，调整标签位置
                });
                text.setMap(mapInstance);
                // 添加点击事件（可选）
                marker.on('click', function () {
                    // 处理点击事件
                    console.log('您点击了 ' + point.title + '坐标' + point.position);
                });
            });

        })
        .catch((e) => {
            console.error('高德地图加载错误:', e);
        });
};







onMounted(() => {
    initMap();

});


onUnmounted(() => {
    mapInstance?.destroy();
});
</script>

<style lang="scss" scoped>
#mapContainer {
    width: 90%;
    height: 85vh;
    margin: 20px auto;
    border: 2px solid #fff;
}
</style>
